<template>
    <t-breadcrumb :max-item-width="'150'" style="margin-bottom: 10px;">
        <t-breadcrumb-item> {{ $t('layout.aside.reportArea') }} </t-breadcrumb-item>
        <t-breadcrumb-item> {{ $t('layout.aside.reportType') }}</t-breadcrumb-item>
    </t-breadcrumb>

    <t-button @click="addShow" size="small">{{ $t('common.button.add') }}</t-button>
    <t-dialog v-model:visible="visible" width="30%" :cancelBtn="$t('common.button.cancel')"
        :header="bType == 'add' ? $t('common.button.add') : $t('common.button.edit')"
        :confirmBtn="$t('common.button.confirm')" @confirm="confirm">
        <t-form colon>
            <t-form-item :label="$t('common.parent')">
                <t-select v-model="data.parentId">
                    <t-option v-for="item in parents"  :label="item.name" :value="item.id" />
                </t-select>
            </t-form-item>
            <t-form-item :label="$t('report.type.type')">
                <t-input v-model="data.name" clearable :placeholder="$t('common.input.name')"></t-input>
            </t-form-item>
            <t-form-item :label="$t('report.type.description')">
                <t-input v-model="data.description" clearable :placeholder="$t('common.input.description')"></t-input>
            </t-form-item>
        </t-form>
    </t-dialog>

    <!-- <t-table style="margin-top: 10px;" row-key="index" height="calc(100vh - 288px)" :data="datas" :columns="columns">
        <template #creationTime="{ row }">
            {{ row.creationTime.replace('T', ' ').substr(0, 19) }}
        </template>
        <template #operation="{ row }">
            <t-button size='small' theme='primary' @click="editShow(row)">
                {{ $t('common.button.edit') }}
            </t-button>
        </template>
    </t-table> -->

    <!-- 树表格 -->
    <t-enhanced-table style="margin-top: 10px;" row-key="id" height="calc(100vh - 288px)" :columns="columns" :tree="treeConfig" :data="datas">
        <template #creationTime="{ row }">
            {{ row.creationTime.replace('T', ' ').substr(0, 19) }}
        </template>
        <template #operation="{ row }">
            <t-button size='small' theme='primary' @click="editShow(row)">
                {{ $t('common.button.edit') }}
            </t-button>
        </template>
    </t-enhanced-table>
</template>

<script setup lang="jsx">
import { ref,reactive } from 'vue'
import api from '../api';
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = ref([
{ colKey: '', title: '', align: 'center' },
    { colKey: 'id', title: t('common.index'), align: 'center' },
    { colKey: 'name', title: t('common.name'), align: 'center' },
    { colKey: 'creationTime', title: t('common.creationTime'), align: 'center' },
    { colKey: 'description', title: t('report.type.description'), align: 'center' },
    { colKey: 'operation', title: t('common.operation'), align: 'center' }
])

//tree
const treeConfig = reactive({
  treeNodeColumnIndex: 0,
});

//父类
const parents = ref([])
const getParents = () => {
    api.getReportTypes().then(res => {
        if (res.successed) {
            parents.value = res.datas
            parents.value.unshift({id:null,name:'无'})
        }
        console.log(parents.value)
    })
}
getParents()

const datas = ref([])
const confirm = () => {
    console.log(data.value)
    if (bType.value == 'add') {
        addConfirm()
    } else {
        editConfirm()
    }
}
const addConfirm = () => {
    if (data.value.name != '') {
        api.addReportType(data.value).then(res => {
            if (res.successed) {
                MessagePlugin.success({
                    content: res.message, duration: 800, onClose: () => {
                        visible.value = false
                        getTypes()
                    }
                })
            }
        })
    }
}
const editConfirm = () => {
    console.log(2)
    if (data.value.name != '') {
        api.editReportType(data.value).then(res => {
            if (res.successed) {
                let index = datas.value.findIndex(item => item.id == data.value.id)
                datas.value[index] = data.value
                MessagePlugin.success({
                    content: res.message, duration: 800, onClose: () => {
                        visible.value = false
                    }
                })
            }
        })
    }
}

const data = ref({})
const visible = ref(false)
const bType = ref('add')
const addShow = () => {
    bType.value = 'add'
    data.value = { name: '',parentId:'',description:'' }
    visible.value = true
}
const editShow = (row) => {
    bType.value = 'edit'
    data.value = JSON.parse(JSON.stringify(row))
    visible.value = true
}

const getTypes = () => {
    api.getReportTypes().then(res => {
        if (res.successed) {
            datas.value = res.datas
        }
    })
}
getTypes()

</script>